/* Temporary fix waiting for https://github.com/cozy/cozy-bar/pull/675 */
.coz-nav-apps-btns-main {
    font-size: 1rem;
}


html {
    --documentMaxWidth: 48rem;
    --documentDividerColor: #D6D8DA;
    --note-base-size: 1.125rem;
    --note-base-lh: 1.5;
    --note-base-color: var(--charcoalGrey);
    --note-block-spacing: calc(var(--note-base-size) * 1.333);
    --note-maintitle-padding: 2rem;
    --documentTopPadding: calc(2 * var(--note-base-size));
    --documentPadding: calc(2 * var(--note-base-size));
    --note-title0-fs: calc(2 * var(--note-base-size));
    --note-title1-fs: calc(1.666 * var(--note-base-size));
    --note-title2-fs: calc(1.333 * var(--note-base-size));
    --note-title3-fs: var(--note-base-size);
    --note-title4-fs: var(--note-base-size);
    --note-title0-lh: 1.2;
    --note-title1-lh: 1.3;
    --note-title2-lh: 1.4;
    --note-title3-lh: var(--note-base-lh);
    --note-title4-lh: var(--note-base-lh);
    --note-title0-color: var(--note-base-color);
    --note-title1-color: var(--note-base-color);
    --note-title2-color: var(--note-base-color);
    --note-title3-color: var(--note-base-color);
    --note-title4-color: var(--coolGrey);
    --note-border-radius: 8px;
    --note-header-height: 3rem;
    --note-header-margin-left: 7rem;
    --note-header-margin-right: 10rem;
    color: var(--note-base-color);
}
@media (max-width: 800px) {
    html {
        --documentPadding: var(--note-base-size);
    }
}
@media (max-width: 420px) {
    html {
        --note-base-size: 1rem;
        --note-title0-fs: calc(1.75 * var(--note-base-size));
        --note-title1-fs: calc(1.5 * var(--note-base-size));
        --note-title2-fs: calc(1.25 * var(--note-base-size));
        --note-block-spacing: var(--note-base-size);
        --note-maintitle-padding: 0;
    }
}

/* For layout change in cozy-ui */
.note-header-menu--editing {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--white);
}
html .akEditor > div:first-child {
    position: sticky;
    top: 0;
    z-index: 3;
}
.note-editor-container {
    height: calc(100% - 48px);
}

/* prose mirror toolbar in the upper bar */
html .akEditor > div:first-child {
    margin-left: var(--note-header-margin-left);
    margin-right: var(--note-header-margin-right);
    margin-bottom: 0;
    height: var(--note-header-height);
}
html .akEditor > div:first-child > div:first-child {
    margin: auto;
    overflow: visible; /* important for dropdowns */
}

/* avatars */
html .akEditor > div:first-child > div:first-child + div {
    display: none;
}



/* icon for text color in the toolbar was not correctly aligned */
.sc-gxMtzJ {
    position: relative;
    top: 0.2rem;
}


/* auto size for the toolbar ... sizes for 5+5rem as margin */
[data-testid="ak-editor-main-toolbar"] > div > div:nth-child(2) {
    width: 730px; /* full toolbar */
    max-width: 100%;
    margin: auto;
}
@media (max-width: 1023px) {
  html {
    --useless: auto;
   /* FIXME : without this block, the next rule is not taken into account */
  }
}
@media (max-width: 1023px) {
  html {
    --notes-share-button-label: none; /* do not display the label in sharing button */
    --note-header-margin-left: 5rem; /* remove margin to leave space for the toolbar */
    --note-header-margin-right: 5rem;
  }
}
@media (max-width: 810px) {
    html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child {
        width: 480px; /* condensed view */
    }
}
@media (max-width: 740px) {
    html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child {
        width: 390px; /* block style as icon */
    }
}
@media (max-width: 660px) {
    html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child {
        width: 380px; /* merge ol and ul as dropdown */
    }
}
@media (max-width: 610px) {
    html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child {
        width: 350px; /* left icons as dropdown */
    }
}
@media (max-width: 530px) {
    html .akEditor > div:first-child > div:first-child > div:first-child > div:first-child {
        width: 280px; /* more left icons as dropdown */
    }
}
@media (max-width: 480px) {
    html {
        --note-header-margin-left: 3rem;
    }
}
@media (max-width: 375px) {
    html {
        --note-header-margin-left: 2.5rem;
    }
    .page-header-menu--right {
        position: relative;
        left: 0.5rem;
    }
}

.sto-app-back {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--slateGrey) !important;
}

.note-header-menu--editing {
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  margin: 0;
  align-items: center;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08), 0 2px 4px 0 rgba(50, 54, 63, 0.08);
  z-index: 3;
  height: var(--note-header-height);
  margin-bottom: calc(0px - var(--note-header-height));
}
.note-header-menu--editing .page-header-menu--left {
  display: flex;
  flex-grow: 1;
  align-items: center;
}
.note-header-menu--editing .page-header-menu--right {
  display: flex;
  align-items: center;
}

html .note-editor-container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
html .notes-list-container .page-header-menu {
    margin-left: 2rem;
    margin-right: 2rem;
}

html .ProseMirror {
  font-size: 1rem !important
}

/* Titres */
html body .note-editor-container .akEditor p,
html body .note-editor-container .akEditor li {
    font-size: var(--note-base-size) !important;
    line-height: var(--note-base-lh) !important;
    color: var(--note-base-color);
}
html body .note-editor-container .akEditor h1 {
    border-top: 1px solid var(--silver);
    padding-top: var(--note-block-spacing);
    font-size: var(--note-title1-fs) !important;
    line-height: var(--note-title1-lh) !important;
    color: var(--note-title1-color);
}
html body .note-editor-container .akEditor h2 {
    font-size: var(--note-title2-fs) !important;
    line-height: var(--note-title2-lh) !important;
    color: var(--note-title2-color);
}
html body .note-editor-container .akEditor h3 {
    font-size: var(--note-title3-fs) !important;
    line-height: var(--note-title3-lh) !important;
    color: var(--note-title3-color);
}
html body .note-editor-container .akEditor h4,
html body .note-editor-container .akEditor h5,
html body .note-editor-container .akEditor h6 {
    font-size: var(--note-title4-fs) !important;
    line-height: var(--note-title4-lh) !important;
    color: var(--note-title4-color);
}

/* Titres dans la dropdown de la barre d'outils */
html body .note-editor-container .akEditor > div:first-child  h4,
html body .note-editor-container .akEditor > div:first-child  h5,
html body .note-editor-container .akEditor > div:first-child  h6 {
    margin-bottom: 0;
}
.akEditor > div:first-child /* sc-bYwvMP */ > div:first-child > div:first-child > div:first-child /* sc-gmeYpB */ > span:first-child /* sc-kTUwUJ */ > div:first-child /* sc-kZmsYB */  div[role=group] > div:nth-child(6),
.akEditor > div:first-child /* sc-bYwvMP */ > div:first-child > div:first-child > div:first-child /* sc-gmeYpB */ > span:first-child /* sc-kTUwUJ */ > div:first-child /* sc-kZmsYB */  div[role=group] > div:nth-child(7) {
    display: none;
}


/* spacing between blocks */
html body .note-editor-container .akEditor p,
html body .note-editor-container .akEditor ul,
html body .note-editor-container .akEditor ol,
html body .note-editor-container .akEditor blockquote,
html body .note-editor-container .akEditor hr,
html body .note-editor-container .akEditor .tableView-content-wrap,
html body .note-editor-container .akEditor .ak-editor-panel,
html body .note-editor-container .akEditor h1,
html body .note-editor-container .akEditor h2,
html body .note-editor-container .akEditor h3,
html body .note-editor-container .akEditor h4,
html body .note-editor-container .akEditor h5,
html body .note-editor-container .akEditor h6 {
    margin-top: 0;
    margin-bottom: var(--note-block-spacing);
}
html body .note-editor-container .akEditor .ak-editor-panel__content > :last-child,
html body .note-editor-container .akEditor li > * {
    margin-bottom: 0;
}

/* blockquote */
html body .note-editor-container .akEditor blockquote {
    margin-left: 0;
    padding-left: 28px;
    border-left: 4px solid var(--silver);
    font-style: italic;
}
html body .note-editor-container .akEditor blockquote i,
html body .note-editor-container .akEditor blockquote em {
    font-style: normal;
}
html body .note-editor-container .akEditor blockquote::before {
    display: none;
}

/* hr */
html body .note-editor-container .akEditor hr {
    height: 1px;
    color: var(--silver);
}

/* tables */
html body .note-editor-container .akEditor .tableView-content-wrap {
    margin-top: -1.8rem;
}
html body .note-editor-container .akEditor .pm-table-wrapper > table {
    border-collapse: separate;
    border-spacing: 0;
    border-width: 0;
}
html body .note-editor-container .akEditor .pm-table-wrapper > table td,
html body .note-editor-container .akEditor .pm-table-wrapper > table th {
    border: 1px solid #C1C7D0;
    border-bottom-width: 0;
    border-right-width: 0;
}
html body .note-editor-container .akEditor .pm-table-wrapper > table tr:last-child td,
html body .note-editor-container .akEditor .pm-table-wrapper > table tr:last-child th {
    border-bottom-width: 1px;
}
html body .note-editor-container .akEditor .pm-table-wrapper > table td:last-child,
html body .note-editor-container .akEditor .pm-table-wrapper > table th:last-child {
    border-right-width: 1px;
}
html body .note-editor-container .akEditor tbody > tr:first-child > th:first-child,
html body .note-editor-container .akEditor tbody > tr:first-child > td:first-child {
    border-top-left-radius: var(--note-border-radius);
}
html body .note-editor-container .akEditor tbody > tr:first-child > th:last-child,
html body .note-editor-container .akEditor tbody > tr:first-child > td:last-child {
    border-top-right-radius: var(--note-border-radius);
}
html body .note-editor-container .akEditor tbody > tr:last-child > th:first-child,
html body .note-editor-container .akEditor tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: var(--note-border-radius);
}
html body .note-editor-container .akEditor tbody > tr:last-child > th:last-child,
html body .note-editor-container .akEditor tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: var(--note-border-radius);
}

/* panels */
html body .note-editor-container .akEditor .ak-editor-panel {
    border-radius: var(--note-border-radius);
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=note] {
    background-color: #F5F6F7 ; /* var(--pale-grey) * 0.8 */
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=note] .ak-editor-panel__icon {
    color: #96999D;
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=info] {
    background-color: #EEF5FD ; /* var(--dodgerBlue) * 0.8 */
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=info] .ak-editor-panel__icon {
    color: 3F7FE9;
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=success] {
    background-color: #F0FAF4 ; /* var(--emerald) * 0.8 */
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=success] .ak-editor-panel__icon {
    color: #68CA73;
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=warning] {
    background-color: #FEF7EF ; /* var(--mango) * 0.8 */
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=warning] .ak-editor-panel__icon {
    color: #EAA649;
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=error] {
    background-color: #FBEFEE; /* var(--pomegranate) * 0,8; */
}
html body .note-editor-container .akEditor .ak-editor-panel[data-panel-type=error] .ak-editor-panel__icon {
    color: #E24239;
}

html .akEditor {
    background-color: var(--documentMarginColor);
    min-width: calc(320px - 2rem);
}



html .fabric-editor-popup-scroll-parent > div > div {
  margin: 0 auto;
  padding: 0;
  max-width: calc(var(--documentMaxWidth) + 2 * var(--documentPadding));
}

html .ak-editor-content-area {
    padding: var(--documentTopPadding) var(--documentPadding) var(--documentPadding) var(--documentPadding) !important;
    background-color: var(--white);
}

#editor-scroll-gutter {
    display: none;
}

html .fabric-editor-popup-scroll-parent > div > div {
    height: 100%;
}

.notes-list {
    width: calc(100% - 20px);
}
.notes-list td, .notes-list th {
    text-align: left;
    color: var(--coolGrey);
}
.notes-list tr > th:first-child {
    padding-left: 2rem;
}
.notes-list tr > td:last-child,
.notes-list tr > th:last-child {
    padding-right: 2rem;
    text-align: right;
}

.note-item {
    display: flex;
    align-items: center;
}
.note-icon {
    margin-right: 1rem;
}
.note-link {
    text-decoration: none;
    text-transform: none;
    font-weight: normal;
}
